<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style/common.css" />
    <link rel="stylesheet" href="./style/index.css" />
  </head>
  <style></style>
  <body>
    <div class="app">
      <div class="navigation disable-select">
        <nav></nav>
      </div>
      <div class="container">
        <ul>
          <li>
            <span class="name">型号（MODEL）</span> :
            <span class="value" data-field="model">JD_AC_US_48A</span>
          </li>
          <li>
            <span class="name">软件版本（FW）</span> :
            <span class="value" data-field="fw">V1.0.1</span>
          </li>
          <li>
            <span class="name">硬件版本（HW）</span> :
            <span class="value" data-field="hw">V2.0</span>
          </li>
          <li>
            <span class="name">RTC时间（RTC）</span> :
            <span class="value" data-field="rtc">2024/05/08 15：44：10</span>
          </li>
          <li>
            <span class="name">额定电流（RATE）</span> :
            <span class="value" data-field="rate">48A</span>
          </li>
          <li>
            <span class="name">即插即充（AUTH FREE）</span> :
            <span class="value" data-field="authFree">ON/OFF</span>
          </li>
          <li>
            <span class="name">蓝牙即插即充（BT FREE）</span> :
            <span class="value" data-field="btFree">ON/OFF</span>
          </li>
          <li>
            <span class="name">充电状态（EVSE STATUS）</span> :
            <span class="value" data-field="evseStatus">0/1/2/3/4/5/6</span>
          </li>
          <li>
            <span class="name">继电器状态（RELAY STATUS）</span> :
            <span class="value" data-field="relayStatus">OPEN/CLOSE/ERR</span>
          </li>
          <li>
            <span class="name">授权状态（RELAY STATUS）</span> :
            <span class="value" data-field="authStatus">TRUE/FALSE</span>
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script>
    // 加载菜单栏
    // 页面访问地址改lists中的href属性
    const lists = [
      {
        name: "系统运行信息",
        href: "http://127.0.0.1:5501/index.html",
        active: true,
      },
      { name: "功能配置", href: "http://127.0.0.1:5501/views/fun-config.html" },
      {
        name: "WIFI配置",
        href: "http://127.0.0.1:5501/views/wifi-config.html",
      },
      {
        name: "WALLBOX控制",
        href: "http://127.0.0.1:5501/views/wall-box.html",
      },
      { name: "OTA", href: "http://127.0.0.1:5501/views/ota.html" },
    ];
    lists.forEach((item) => {
      const a = document.createElement("a");
      a.target = "_self";
      a.href = item.href;
      a.innerText = item.name;
      if (item.active) {
        a.classList.add("active");
      }
      document.querySelector("nav").appendChild(a);
    });
    // 加载菜单栏

    async function update() {
      const res = await mockData();
      console.log(res);
      const vals = document.querySelectorAll("ul li .value");
      Array.from(vals).forEach((item) => {
        item.innerHTML = res[item.dataset.field];
      });
    }
    update();

    // 模拟数据
    function mockData() {
      return new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve({
            model: "_AC_US_",
            fw: "V1.",
            hw: "dada",
            rtc: "2323/12/55 1313",
            rate: "33A",
            authFree: "Off",
            btFree: "ON",
            evseStatus: "9",
            relayStatus: "open",
            authStatus: "TRUE",
          });
        }, 1000);
      });
    }
  </script>
</html>
